import React from 'react'
import styles from './index.less'
import { useCanvasContext } from '@/store/hooks'
import { isTextComponent, defualtCommonStyle } from '@/constants'
// 默认样式
const defaultStyle = {
	...defualtCommonStyle,
	lineHeight: '30px',
	fontSize: 12,
	fontWeight: 'normal',
	color: '#000',
	backgroundColor: '#ffffff00',
	textAlign: 'left',
	wordSpacing: '10px',
	fontFamily: '',
}

// 拼接样式
const settings = [
	{
		value: '双击编辑标题',
		style: {
			...defaultStyle,
			fontSize: 28,
			height: 50,
			lineHeight: '50px',
		},
	},
	{
		value: '双击编辑正文',
		style: defaultStyle,
	},
]

export default function DetaiList() {
	const _canvas = useCanvasContext()

	const addCmp = _cmp => {
		_canvas.addCmp(_cmp)
	}
	const onDragStart = (e, _cmp) => {
		e.dataTransfer.setData('drag-cmp', JSON.stringify(_cmp))
	}
	return (
		<div className={styles.main}>
			<ul className={styles.box}>
				{settings.map(item => (
					<li
						onClick={() => addCmp({ ...item, type: isTextComponent })}
						className={styles.item}
						key={item.value}
						draggable="true"
						onDragStart={e =>
							onDragStart(e, { ...item, type: isTextComponent })
						}
					>
						{item.value.replace('双击编辑', '')}
					</li>
				))}
			</ul>
		</div>
	)
}
